<template>
  <div class="component component--module more-headlines">
    <header class="header header--primary">
      <h2 class="title">
        <span class="label">{{ newstitle.title }}</span>
      </h2>
      <p class="paragraph">{{ newstitle.content }}</p>
    </header>
    <div class="column column--primary j-moreHeadlineWrapper">
      <div class="collection__elements j-scrollElement">
        <!-- newsViewer.vue 13行 新闻 -->
        <div
          class="element element--article no-image newswires DowJonesNewswires"
          v-for="(item, index) in props.newsData"
          :key="index"
        >
          <figure class="article__figure">
            <a class="disableShadowBox" @click="pushDetail(item)">
                <img
                  v-if="item.imgUrl == null"
                  src="https://images.barrons.com/im-63581282"
                  alt=""
                />
                <img :src="item.imgUrl" v-else/>
              <!-- <router-link
                class="figure__image"
                :to="{
                  name: 'NewDetail',
                  params: { uuid: item.uuid, author: item.author },
                }"
              >
                <img
                  v-if="item.imgUrl == null"
                  src="https://images.barrons.com/im-63581282"
                  alt=""
                />
                <img :src="item.imgUrl" />
              </router-link> -->
            </a>
          </figure>
          <div class="article__content">
            <h3 class="article__headline">
              <span class="article__label opinion">{{ item.author }}</span>
              <!-- <router-link
                :to="{
                  name: 'NewDetail',
                  params: { uuid: item.uuid, author: item.author },
                }"
                >
                <a class="link">{{ item.title }}</a>
                
                </router-link
              > -->
                <a class="link" @click="pushDetail(item)">{{ item.title }}</a>
            </h3>
            <div class="content--secondary">
              <div class="group group--tickers">
                <bg-quote>
                  <a class="ticker qt-chip j-qt-chip">
                    <span class="ticker__symbol">{{ item.company }}</span>
                    <bg-quote class="ticker__change">{{
                      item.ticketChange
                    }}</bg-quote>
                  </a>
                </bg-quote>
              </div>
            </div>

            <div class="article__details">
              <span class="article__timestamp">{{
                formateDate(item.createTime, "America/New_York")
              }}</span>

              <span class="article__author">{{ item.author }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="group group--buttons cover">
        <button class="btn btn--secondary js--more-headlines">See More</button>
        <button class="btn btn--primary js-search-top" @click="toTop">
          Back to Top
        </button>
      </div> -->
    </div>
    <template id="moreHeadlineTemplate">
      <div class="element element--article">
        <figure class="article__figure">
          <a class="figure__image">
            <img class="lazyload" alt="Read full story" />
          </a>
        </figure>
        <div class="article__content">
          <span class="article__label"></span>
          <h3 class="article__headline">
            <a class="link"></a>
          </h3>
          <p class="article__summary"></p>
          <div class="content--secondary">
            <div class="group group--tickers">
              <a class="ticker">
                <span class="ticker__symbol"></span>
                <bg-quote class="ticker__change"></bg-quote>
                <i class="icon"></i>
              </a>
            </div>
          </div>
          <ul class="article__details">
            <li class="article__timestamp"></li>
            <li class="article__author"></li>
          </ul>
        </div>
      </div>
    </template>
  </div>
</template>
<script setup>
const props = defineProps(["newsData", "newstitle"]);
console.log(props);
// 时间转换
import { formateDate } from "@/utils/timeHandle";
const emit = defineEmits(["toTop"]);
const toTop = () => {
  emit("toTop");
};
const pushDetail = (data) => {
    router.push({ name: 'stockDetail', params: { symbol: data.symbol } })
}
</script>
<style lang="scss" scoped>
img{
  max-width:'120px';
  aspect-ratio: 30/17;
  height: auto;
}
</style>
